<!--  -->
<template>
    <el-dialog class="adddialog" v-model="dialogVisible" title="添加费用" width="600" :before-close="handleClose">

        <div>


            <el-form ref="ruleFormRef" :model="ruleForm" class="ruleFormRef" label-width="auto" status-icon>

                <el-form-item label="标题" prop="title">
                    <el-input v-model="ruleForm.title" />
                </el-form-item>


                <el-form-item label="位置" prop="typeid">
                    <el-select v-model="ruleForm.typeid" placeholder="">
                        <el-option v-for="item in typeList" :label="item.name" :value="item.id" />
                    </el-select>
                </el-form-item>


                <el-form-item label="URL" prop="url">
                    <el-input v-model="ruleForm.url" />
                </el-form-item>

                <el-form-item class="photo" label="图片">
                    <el-upload :headers="headers" class="avatar-uploader" :action="uploadUrl" :show-file-list="false"
                        :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
                        <img v-if="ruleForm.picture" :src="imgBaseUrl + ruleForm.picture" class="avatar" />
                        <el-icon v-else class="avatar-uploader-icon">
                            <Plus />
                        </el-icon>
                    </el-upload>

                </el-form-item>




                <el-form-item label="排序" prop="sort">
                    <el-input v-model="ruleForm.sort" />
                </el-form-item>


                <el-form-item prop="enabled" label="是否显示">
                    <el-radio-group v-model="ruleForm.enabled">
                        <el-radio :value="1">显示</el-radio>
                        <el-radio :value="0">不显示</el-radio>
                    </el-radio-group>
                </el-form-item>

            </el-form>
        </div>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="handleClose">取消</el-button>
                <el-button type="primary" @click="submit">
                    提交
                </el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script lang='ts' setup>
import {add}from '../../service/advertisement/advertisement'
import { reactive, ref, onMounted, defineEmits } from 'vue'
const imgBaseUrl=ref(import.meta.env.VITE_IMG_URL);
import { useUserStore } from '../../store';
const uploadUrl=import.meta.env.VITE_BASE_URL+"upload/add";
let store = useUserStore();
const headers = { 'Authorization': store.token }
//图片上传
import { ElMessage, type UploadProps } from 'element-plus'


const handleAvatarSuccess: UploadProps['onSuccess'] = (
    response,
) => {

    if (response.errCode === 10000) {

        ruleForm.picture = response.data;
    }
}

const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile) => {
    if (rawFile.type !== 'image/jpeg' && rawFile.type !== 'image/png') {
        ElMessage.error('只能上传JPG|PNG格式文件!')
        return false
    } else if (rawFile.size / 1024 / 1024 > 2) {
        ElMessage.error('上传的图片不能超过2MB!')
        return false
    }
    return true
}
const props=withDefaults(defineProps<advertisement>(),{
    id: null,
    title: '',
    picture: '',
    sort: null,
    typeid: null,
    url: null,
    enabled: null,
  }
)



const submit = async () => {
    let res:any = await add(ruleForm);
    if (res.errCode === 10000) {
        ElMessage.success('添加成功');
        emits("close",true);
    }else{
        ElMessage.error(res.errMsg);
    }
    console.log("添加图片",res);
}


const dialogVisible = ref(true)
const emits = defineEmits(["close"])
const handleClose = () => {
    emits("close");
}
// const dateValue = ref([])


type advertisement = {
    id: number | null,
    title: string | null,
    picture: string | null,
    sort: number | null,
    typeid: number | null,
    url: string | null,
    enabled: number | null,
}

const ruleForm = reactive<advertisement>({
    id: null,
    title: '',
    picture: '',
    sort: null,
    typeid: null,
    url: null,
    enabled: null,

})

import { type } from '../../service/advertisement/advertisement';
let typeList:any = reactive([]);
const getType= async ()=>{
    let res:any=await type()
    typeList=res.data.list
    console.log(res.data.list);
    console.log(typeList);
    
    Object.assign(ruleForm,props);
    
}

onMounted(() => {
    getType()
})

</script>
<style scoped lang="less">
.ruleFormRef {
    padding: 10px 50px;
}


  .photo{
     
      height:80px;
      display: flex;
      align-items: center;
      
  }

/deep/ .avatar-uploader .el-upload {
    width: 80px;
    height: 80px;
    border: 1px dashed var(--el-border-color);
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);
  }
  .avatar{
    width: 100%;
    height: 100%;
  }
</style>